<template>
  <!-- 页身 -->
  <div class="main">
    <div class="car">
      <div class="carItem">
        <div class="myLogo">
          <img src="//a.vpimg2.com/upload/upimg2/slogan/cartHeader.png" />
        </div>
        <ul class="carUl">
          <li>
            <span class="span1"></span>
            <span class="text1">100%正品</span>
          </li>
          <li>
            <span class="span2"></span>
            <span class="text2">七天无理由放心退</span>
          </li>
          <li>
            <span class="span3"></span>
            <span class="text3">限时抢购</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="mainItem">
      <!-- 头部1 -->
      <div class="header1">
        <a href="javascript:;">
          <span>特卖商品</span>
        </a>
      </div>
      <!-- 头部2 -->
      <div class="header2">
        <span class="spans"
          >配送至
          <em>北京市</em>
        </span>
        <div class="headRigh">
          <p class="text">
            勾选商品
            <img
              src="//shop.vipstatic.com/v2/dist/front/biz/cart/asset/img/te5/commons/multiplechoice_selected_normal-hash-e072799d.png"
            />
            ”即可锁定库存20分钟，倒计时内不用担心商品被抢走～
          </p>
        </div>
      </div>
      <!-- 主体 -->
      <div class="subject">
        <div class="jectItem">
          <ul class="jectUl">
            <li><span class="texte">商品</span></li>
            <li><span class="texte">单价</span></li>
            <li><span class="texte">数量</span></li>
            <li><span class="texte">操作</span></li>
          </ul>
        </div>
        <!-- 购物车详情 -->
        <div class="ordes">
          <div class="ortitle">唯品自营</div>
          <div class="orTable">
            <div class="orbox">
              <div class="orInner">
                <table
                  class="table"
                  v-for="(shop, index) in this.List"
                  :key="shop.id"
                >
                  <tbody>
                    <tr class="taTr">
                      <td class="taItem">
                        <div class="ordhe">
                          <div class="ordee">
                            <input type="checkbox" />
                            <!-- <label class="orlate"></label> -->
                          </div>
                          <div class="Two">
                            <img
                              src="//a.vpimg4.com/upload/merchandise/pdcvis/106728/2021/0531/120/0ca3453a-50e8-440f-a421-70ed4226b4ca.jpg"
                            />
                          </div>
                          <div class="textq">
                            <h3>
                              <a
                                href="javascript:;"
                                title="烟酰胺植物美白大米补水双效面膜25片淡斑去黄提亮肤色改善黯沉"
                              >
                                烟酰胺植物美白大米补水双效面膜25片淡斑去黄提亮肤色改善黯沉
                              </a>
                            </h3>
                            <p>尺码：美白面膜7片+大米面膜14片+红石榴面膜4片</p>
                          </div>
                        </div>
                      </td>
                      <td class="taItem1">
                        <div class="price">
                          <span>¥</span>
                          <strong class="Num">99</strong>
                        </div>
                      </td>
                      <td class="taItem2">
                        <div class="Numss">
                          <a href="javascript:;" @click="changeNum(-1)">
                            <span>-</span>
                          </a>
                          <div class="put">
                            <input
                              type="text"
                              placeholder="1"
                              v-model="count"
                            />
                          </div>
                          <a
                            class="atist"
                            href="javascript:;"
                            @click="changeNum(1)"
                          >
                            <span>+</span>
                          </a>
                        </div>
                      </td>
                      <td class="taItem3">
                        <div class="detel">
                          <a href="javascript:;">删除</a>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>

                <!--  <table class="table">
                  <tbody>
                    <tr class="taTr">
                      <td class="taItem">
                        <div class="ordhe">
                          <div class="ordee">
                            <input type="checkbox" />
                            <label class="orlate"></label>
                          </div>
                          <div class="Two">
                            <img
                              src="//a.vpimg2.com/upload/merchandise/pdcvis/634680/2021/0420/40/8584e4cc-b37a-4fdb-8bd8-bd3bb125d05f.jpg"
                            />
                          </div>
                          <div class="textq">
                            <h3>
                              <a
                                href="javascript:;"
                                title=" 头层牛皮尖头气质优雅铆钉高跟凉鞋一字扣带后空法式细跟女鞋"
                              >
                                头层牛皮尖头气质优雅铆钉高跟凉鞋一字扣带后空法式细跟女鞋
                              </a>
                            </h3>
                            <p>尺码：35</p>
                          </div>
                        </div>
                      </td>
                      <td class="taItem1">
                        <div class="price">
                          <span>¥</span>
                          <strong class="Num">403</strong>
                        </div>
                      </td>
                      <td class="taItem2">
                        <div class="Numss">
                          <a href="javascript:;">
                            <span>-</span>
                          </a>
                          <div class="put">
                            <input type="text" placeholder="1" />
                          </div>
                          <a class="atist" href="javascript:;">
                            <span>+</span>
                          </a>
                        </div>
                      </td>
                      <td class="taItem3">
                        <div class="detel">
                          <a href="javascript:;">删除</a>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>

            <table class="table">
              <tbody>
                <tr class="taTr">
                  <td class="taItem">
                    <div class="ordhe">
                      <div class="ordee">
                        <input type="checkbox" />
                          <label class="orlate"></label>
                      </div>
                      <div class="Two">
                        <img
                          src="//a.vpimg2.com/upload/merchandise/pdcpos/1100008466/2021/0129/69/a8201b20-9a98-487c-a201-c28e7708080f.jpg"
                        />
                      </div>
                      <div class="textq">
                        <h3>
                          <a
                            href="javascript:;"
                            title="劳斯合金汽车模型莱斯男孩小汽车儿童玩具车模型摆件仿真合金车"
                          >
                            劳斯合金汽车模型莱斯男孩小汽车儿童玩具车模型摆件仿真合金车
                          </a>
                        </h3>
                        <p>尺码：均码</p>
                      </div>
                    </div>
                  </td>
                  <td class="taItem1">
                    <div class="price">
                      <span>¥</span>
                      <strong class="Num">368</strong>
                    </div>
                  </td>
                  <td class="taItem2">
                    <div class="Numss">
                      <a href="javascript:;">
                        <span>-</span>
                      </a>
                      <div class="put">
                        <input type="text" placeholder="1" />
                      </div>
                      <a class="atist" href="javascript:;">
                        <span>+</span>
                      </a>
                    </div>
                  </td>
                  <td class="taItem3">
                    <div class="detel">
                      <a href="javascript:;">删除</a>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table> -->
              </div>
            </div>
          </div>
          <div class="titiles">
            <div>唯品国际</div>
          </div>
          <div class="orTable">
            <div class="orbox">
              <div class="orInner">
                <table class="table">
                  <tbody>
                    <tr class="taTr">
                      <td class="taItem">
                        <div class="ordhe">
                          <div class="ordee">
                            <input type="checkbox" />
                            <!-- <label class="orlate"></label> -->
                          </div>
                          <div class="Two">
                            <img
                              src="//a.vpimg3.com/upload/merchandise/pdcvis/2021/06/25/40/b6f19149-1078-4ed6-a899-1711581ccd65.jpg"
                            />
                          </div>
                          <div class="textq">
                            <h3>
                              <a
                                href="javascript:;"
                                title="【双肩带 人气款】街头风时尚单肩包复古风琴包女式单肩斜挎包女"
                              >
                                【双肩带
                                人气款】街头风时尚单肩包复古风琴包女式单肩斜挎包女
                              </a>
                            </h3>
                            <p>尺码：均码</p>
                          </div>
                        </div>
                      </td>
                      <td class="taItem1">
                        <div class="price">
                          <span>¥</span>
                          <strong class="Num">359</strong>
                        </div>
                      </td>
                      <td class="taItem2">
                        <div class="Numss">
                          <a href="javascript:;">
                            <span>-</span>
                          </a>
                          <div class="put">
                            <input type="text" placeholder="2" />
                          </div>
                          <a class="atist" href="javascript:;">
                            <span>+</span>
                          </a>
                        </div>
                      </td>
                      <td class="taItem3">
                        <div class="detel">
                          <a href="javascript:;">删除</a>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <div class="bottoms">
            <div class="booLeft">
              <div class="leftItem">
                <a href="javascript:;">
                  <span>我的优惠券</span>
                  <i>^</i>
                </a>
              </div>
            </div>
            <div class="booright">
              <div class="rightq">
                共<span class="span3">0</span>
                件商品
                <span class="span1">¥</span>
                <span class="span2">0</span>
              </div>
            </div>
            <div class="booright">
              <div class="rightq">
                总金额(未含运费)
                <span class="span4">¥</span>
                <span class="span5">0</span>
              </div>
            </div>
            <div class="over">
              <div class="overLeft">
                <p>请在倒计时结束时结算</p>
              </div>
              <div class="overright" @click="goreder">立即结算</div>
            </div>
          </div>
          <Bottom></Bottom>
          <Footerover></Footerover>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "ShopCart",
  data() {
    return {
      count: 0,
      List: [
        {
          id: 61,
          userId: "2",
          skuId: 4,
          cartPrice: 5999,
          skuNum: 4,
          imgUrl: "http://192.168.200.128:8080xxx.jpg",
          skuName: "Apple iPhone 11 (A2223) ",
          isChecked: 1,
          skuPrice: 5999,
        },
        {
          id: 62,
          userId: "2",
          skuId: 2,
          cartPrice: 5499,
          skuNum: 1,
          imgUrl: "http://192.168.200.128:8080/yyyy.jpg",
          skuName: "Apple iPhone 11 (A2223) 64GB 红色",
          isChecked: 0,
          skuPrice: 5499,
        },
      ],
    };
  },
  methods: {
    //点击加减
    changeNum(num) {
      if (num > 0) {
        this.count++;
      } else {
        let { count } = this;
        if (count > 1) {
          this.count--;
        } else {
          alert("你确定要删除吗？");
        }
      }
    },
    goreder(){
      this.$router.push('/trade')
    },

    //获取购物车
    getShopCar() {
      this.$store.dispatch("getShopCarList");
    },
  },
  mounted() {
    this.getShopCar();
  },
  computed: {
    ...mapState({
      shopCarList: (state) => state.shopcart.shopCarList(),
    }),
  },
};
</script>

<style lang="less" scoped>
.main {
  .car {
    margin-bottom: 30px;
    height: 78px;
    border-bottom: 2px solid #f3168a;
    background: #fff;
    .carItem {
      position: relative;
      z-index: 1;
      margin: auto;
      width: 960px;
      .myLogo {
        float: left;
        padding: 16px 0 12px;
        height: 48px;
        img {
          width: 214px;
          height: 48px;
          display: block;
          overflow: hidden;
        }
      }
      .carUl {
        float: right;
        margin-top: 40px;
        z-index: 1;
        height: 20px;
        list-style: none;
        li {
          display: inline-block;
          margin-left: 25px;
          white-space: nowrap;
          .span1 {
            float: left;
            background-image: url(//shop.vipstatic.com/v2/dist/front/biz/cart/asset/img/te5/commons/sprites-hash-29a8cdc6.png);
            background-position: -587px -145px;
            width: 20px;
            height: 20px;
            display: block;
            line-height: 1;
            font-size: 20px;
            color: #f66a96;
          }
          .text1 {
            display: inline-block;
            vertical-align: top;
            line-height: 20px;
            margin-left: 20px;
          }
        }
        li {
          display: inline-block;
          margin-left: 25px;
          white-space: nowrap;
          .span2 {
            float: left;
            background-image: url(//shop.vipstatic.com/v2/dist/front/biz/cart/asset/img/te5/commons/sprites-hash-29a8cdc6.png);
            background-position: -432px -253px;
            width: 20px;
            height: 20px;
            display: block;
            line-height: 1;
            font-size: 20px;
            color: #f66a96;
          }
          .text2 {
            display: inline-block;
            vertical-align: top;
            line-height: 20px;
            margin-left: 20px;
          }
        }
        li {
          display: inline-block;
          margin-left: 25px;
          white-space: nowrap;
          .span3 {
            float: left;
            background-image: url(//shop.vipstatic.com/v2/dist/front/biz/cart/asset/img/te5/commons/sprites-hash-29a8cdc6.png);
            background-position: -587px -169px;
            width: 20px;
            height: 20px;
            display: block;
            line-height: 1;
            font-size: 20px;
            color: #f66a96;
          }
          .text3 {
            display: inline-block;
            vertical-align: top;
            line-height: 20px;
            margin-left: 20px;
          }
        }
      }
    }
  }
  .mainItem {
    background-color: transparent;
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    height: 500px;
    .header1 {
      border-bottom: 1px solid #d0d0d0;
      margin-bottom: 30px;
      font-weight: 500;
      a {
        color: #f10180;
        padding: 12px;
        border-bottom: 3px solid #f10180;
        position: relative;
        bottom: -1px;
        display: inline-block;
        font-size: 16px;
        padding: 15px 10px;
        margin-right: 10px;
        text-decoration: none;
        span {
          color: #f10180;
          font-family: MicrosoftYaHei;
        }
      }
    }
    .header2 {
      margin-bottom: 30px;
      display: flex;
      .spans {
        font-size: 18px;
        vertical-align: bottom;
        height: 25px;
        max-width: 460px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        display: lnline-block;
        word-spacing: normal;
        letter-spacing: normal;
        em {
          font-weight: 700;
          margin-bottom: 5px;
        }
      }
      .headRigh {
        margin-left: 15px;
        padding-left: 16px;
        vertical-align: bottom;
        position: relative;
        ::before {
          content: "";
          position: absolute;
          top: 1px;
          left: 0;
          height: 16px;
          width: 1px;
          background: #c4c4c4;
        }
        .text {
          font-size: 15px;
        }
      }
    }
    .subject {
      margin-bottom: 40px;
      background-color: #fff;
      .jectItem {
        width: 958px;
        height: 40px;
        background-color: #f9f9f9;
        .jectUl {
          width: 100%;
          display: flex;
          float: left;
          border: 1px solid #e0e0e0;
          height: 38px;
          line-height: 38px;
          li {
            padding-left: 15px;
            width: 25%;
            color: #333;
            font-size: 16px;
            display: lnline-block;
            vertical-align: top;
            word-spacing: normal;
            letter-spacing: normal;
            .texte {
              font-size: 12px;
              margin-left: 147px;
            }
          }
        }
      }
      .ordes {
        margin-bottom: 20px;
        .ortitle {
          font-family: MicrosoftYaHei;
          font-size: 16px;
          color: #f10180;
          padding: 20px 15px 16px 15px;
        }
        .orTable {
          border: 1px solid #e0e0e0;
          .orbox {
            margin-left: auto;
            margin-right: auto;
            .orInner {
              .table {
                border-collapse: collapse;
                border-spacing: 0ch;
                tbody {
                  .taTr {
                    padding-bottom: 10px;
                    display: block;
                    .taItem {
                      width: 335px;
                      padding-left: 15px;
                      padding-top: 15px;
                      height: 74px;
                      vertical-align: top;
                      .ordhe {
                        display: flex;
                        min-height: 74px;
                        .ordee {
                          padding-top: 17px;
                          line-height: 24px;
                          // float: left;
                          margin-right: 10px;
                          padding: 22px 1px 18px;
                          width: 19px;
                          height: 16px;
                          display: inline;
                          position: relative;
                          cursor: pointer;
                          overflow: hidden;
                          input {
                            width: 19px;
                            height: 16px;
                            z-index: 1;
                          }
                        }
                        .Two {
                          position: relative;
                          // z-index: 7;
                          // zoom: 1;
                          // box-shadow: none;
                          width: 74px;
                          height: 74px;
                          margin-right: 15px;
                          img {
                            display: block;
                            overflow: hidden;
                            width: 74px;
                            height: 74px;
                            border: 0 none;
                          }
                        }
                        .textq {
                          float: left;
                          width: 203px;
                          h3 {
                            width: 180px;
                            max-height: 32px;
                            margin-bottom: 8px;
                            overflow: hidden;
                            font-weight: 400;
                            line-height: 16px;
                            word-wrap: break-word;
                            max-width: 300px;
                            font-size: 12px;
                            a {
                              color: #333;
                              text-decoration: none;
                            }
                            :hover {
                              color: #f10180;
                            }
                          }
                          p {
                            width: 180px;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                          }
                        }
                      }
                    }
                    .taItem1 {
                      width: 274px;
                      position: relative;
                      padding-top: 15px;
                      height: 74px;
                      vertical-align: top;
                      .price {
                        display: block;
                        color: #f10180;
                        position: relative;
                        zoom: 1;
                        span {
                          position: absolute;
                          left: 122px;
                          top: 1px;
                          padding: 0 2px;
                          font-family: Arial !important;
                        }
                        .Num {
                          position: absolute;
                          left: 131px;
                          font-weight: 700;
                        }
                      }
                    }
                    .taItem2 {
                      width: 160px;
                      padding-top: 15px;
                      height: 74px;
                      vertical-align: top;
                      .Numss {
                        margin-right: auto;
                        margin-left: auto;
                        position: relative;
                        padding: 0 23px;
                        width: 28px;
                        height: 22px;
                        border: 1px solid #e3e2e2;
                        border-radius: 2px;
                        a {
                          position: absolute;
                          background: #fff;
                          top: 0;
                          width: 22px;
                          height: 22px;
                          z-index: 1;
                          text-decoration: none;
                          left: 0;
                          border-right: 1px solid #e3e2e2;
                          span {
                            text-align: center;
                            position: absolute;
                            top: 1px;
                            left: 6px;
                            width: 8px;
                            height: 2px;
                            border-right: 1px solid #bdbcdb;
                            border-left: 1px solid #dbdbdb;
                          }
                        }
                        .put {
                          position: relative;
                          padding: 3px 0;
                          width: 28px;
                          height: 16px;
                          overflow: hidden;
                          input {
                            width: 28px;
                            height: 22px;
                            text-align: center;
                            line-height: 22px;
                            color: #272525;
                            background-color: #fff;
                            border: none;
                            outline: none;
                            position: absolute;
                            top: 0;
                            left: 0;
                            z-index: 1;
                          }
                        }
                        .atist {
                          position: absolute;
                          left: 50px;
                          border-left: 1px solid #e3e2e2;
                          background: #fff;
                          top: 0;
                          width: 22px;
                          height: 22px;
                          z-index: 1;
                          display: block;
                          span {
                            position: absolute;
                            top: 3px;
                            background-color: #fff;
                            left: 6px;
                            width: 8px;
                            height: 2px;
                            border-right: 1px solid #bdbcdb;
                            border-left: 1px solid #dbdbdb;
                            cursor: pointer;
                            color: #aaa;
                          }
                        }
                      }
                    }
                    .taItem3 {
                      width: 174px;
                      text-align: center;
                      padding-top: 15px;
                      height: 74px;
                      vertical-align: top;
                      .detel {
                        position: relative;
                        a {
                          display: inline-block;
                          padding: 0 8px 8px;
                          color: #666;
                          text-decoration: none;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
        .titiles {
          width: 960px;
          height: 60px;
          margin: 0 auto;
          overflow: hidden;
          margin-bottom: 36px;
          div {
            font-size: 14px;
            margin: 30px 20px 0 20px;
          }
        }
        .bottoms {
          margin-top: 38px;
          height: 162px;
          margin-bottom: 36px;
          border: 1px solid #ecebeb;
          .booLeft {
            float: left;
            margin-bottom: 10px;
            .leftItem {
              position: relative;
              z-index: 3;
              display: inline-block;
              padding: 15px 0 0 15px;
              a {
                display: inline-block;
                position: relative;
                z-index: 1;
                padding-left: 10px;
                padding-right: 43px;
                height: 30px;
                vertical-align: top;
                color: #f10180;
                border: 1px solid #f10180;
                border-radius: 3px;
                background-color: #fff;
                text-align: center;
                line-height: 30px;
                text-decoration: none;
                span {
                  font-size: 14px;
                  margin-right: 20px;
                }
                i {
                  position: absolute;
                  top: 11px;
                  right: 7px;
                  z-index: 1;
                  font-size: 16px;
                  line-height: 1;
                }
              }
            }
          }
          .booright {
            text-align: right;
            .rightq {
              position: relative;
              z-index: 1;
              margin-bottom: 5px;
              padding-right: 110px;
              color: #888;
              line-height: 21px;
              margin-right: -79px;
              .span1 {
                display: inline-block;
                margin-top: 20px;
                padding: 0 2px;
                color: #333;
                font-size: 14px;
                line-height: 21px;
                margin-left: 82px;
              }
              .span3 {
                color: red;
                padding: 0 5px;
              }
              .span4 {
                color: red;
                margin-left: 79px;
                font-size: 16px;
              }
              .span5 {
                color: red;
                font-size: 16px;
              }
            }
          }
          .over {
            margin: 0 -1px -1px;
            height: 50px;
            background: #f3f3f3;
            margin-top: 30px;
            .overLeft {
              width: 706px;
              height: 48px;
              float: left;
              line-height: 50px;
              border: 1px solid #e0e0e0;
              p {
                float: right;
                color: #666666;
                margin-right: 30px;
              }
            }
            .overright {
              width: 252px;
              height: 50px;
              font-size: 18px;
              text-align: center;
              line-height: 50px;
              background: #d0d0d0;
              float: right;
              color: #aaa;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
</style>
